import React, { PureComponent } from 'react'
import { Button } from 'antd'

import styles from './index.module.css'

export default class Parent extends PureComponent {
  state = {
    name: 'Tom',
  }

  change = () => {
    this.setState({ name: 'Jerry' });
  }

  render() {
    console.log('xxxxx Parent render xxxxx');
    const { name } = this.state;

    return (
      <div className={styles.parent}>
        我是父组件，名称是: {name} <br />
        <Button onClick={this.change}>点击名称改成Jerry</Button>
        <Child />
      </div>
    )
  }
}

class Child extends PureComponent {
  render() {
    console.log('xxxxx Child render xxxxx');
    return (
      <div className={styles.child}>
        我是子组件
      </div>
    );
  }
}
